跳到主要内容

How CSS is structured

@规则​

CSS 的 @rules（读作“at-rules”）是一些特殊的规则，提供了关于 CSS 应该执行什么或如何表现的指令。有些@规则很简单，只有一个关键词和一个值。例如，@import 将一个样式表导入另一个 CSS 样式表：

@import "styles2.css";

你可能遇到的一个常见的@规则是 @media，它被用来创建媒体查询。媒体查询使用条件逻辑来应用 CSS 样式。

在下面的例子中，样式表为 <body> 元素定义了一个默认的粉红色背景。然而，如果浏览器的视口宽于 30em，接下来的媒体查询则定义了蓝色背景。

body {
  background-color: pink;
}

@media (min-width: 30em) {
  body {
    background-color: blue;
  }
}

简写属性​

一些属性，如 font、background、padding、border 和 margin 等属性称为简写属性。它们允许在一行中设置多个属性值，从而节省时间并使代码更整洁。

例如，这一行代码：

/* 在像 padding 和 margin 这样的 4 值简写语法中，
   数值的应用顺序是上、右、下、左（从顶部顺时针方向）。
   也有其他的简写类型，例如 2 值简写，
   它为顶部/底部设置 padding/margin，然后是左侧/右侧 */
padding: 10px 15px 15px 5px;

与这四行代码是等价的：

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

这一行代码：

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

与这五行代码是等价的：

background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;
警告

警告： 使用 CSS 简写属性的一个不太明显的方面是省略的值如何重置。一个没有在 CSS 简写属性中指定的值会恢复到它的初始值。这意味着 CSS 简写属性中的省略可以覆盖之前设置的值。

注释​

CSS 中的注释以 /* 开头，以 */ 结尾。

/*.special {
  color: red;
}*/

p {
  color: blue;
}
/* 处理基本元素样式 */
/* -------------------------------------------------------------------------------------------- */
body {
  font:
    1em/150% Helvetica,
    Arial,
    sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  /* 在更大的屏幕或窗口中提高全局的字体大小以提高可读性 */
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

/* 处理在 DOM 中嵌套的特殊元素 */
/* -------------------------------------------------------------------------------------------- */
div p,
#id:first-line {
  background-color: red;
  border-radius: 3px;
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}